<template>
	<view v-if="appMeunShow" class="absolute left-2 right-2 bg-white p-2 rounded-md overflow-auto" style="z-index: 100000;top: 20rpx;">
		<view class="flex flex-col p-4">
			<view v-for="(item,index) in treeList" :key="index">
				<view class="flex items-center p-2" :class="{activeText:activePath==item.path}" @click="navigator(item)">
					<image :src="item.icon" style="width: 20px;height: 20px;margin-right: 5px;"></image>
					{{item.name}}
				</view>
				<view v-for="(sub,si) in item.children" class="ml-8 p-2 text-black__70" :class="{activeText:activePath==sub.path}" @click="navigator(sub)">
					{{sub.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				activePath:'/pages/index/index',
				treeList: [
					{
						name: '申请账号',
						path: '',
						icon: '/static/image/tabBar/icon_home.png',
						children:[
							{
								name: '阿里云国际',
								path: '/pages/applyAccount/aliyun/aliyun',
							},
							{
								name: '腾讯云国际',
								path: '/pages/applyAccount/tencentCloud/tencentCloud',
							},
							{
								name: 'AWS国际',
								path: '/pages/applyAccount/AWSCloud/AWSCloud',
							},
							{
								name: '谷歌云国际',
								path: '/pages/applyAccount/googleCloud/googleCloud',
							}
						]
					},
					{
						name: '自助充值',
						path: '',
						icon: '/static/image/tabBar/icon_home.png',
						children:[
							{
								name: '阿里云国际',
								path: '/pages/redeemVoucher/aliyun/aliyun',
							},
							{
								name: '腾讯云国际',
								path: '/pages/redeemVoucher/tencentCloud/tencentCloud',
							},
							{
								name: 'AWS国际',
								path: '/pages/redeemVoucher/AWSCloud/AWSCloud',
							},
							{
								name: '谷歌云国际',
								path: '/pages/redeemVoucher/googleCloud/googleCloud',
							}
						]
					},
					{
						name: '账号列表',
						path: '',
						icon: '/static/image/tabBar/icon_home.png',
						children:[
							{
								name: '阿里云国际',
								path: '/pages/account/aliyun/aliyun',
							},
							{
								name: '腾讯云国际',
								path: '/pages/account/tencentCloud/tencentCloud',
							},
							{
								name: 'AWS国际',
								path: '/pages/account/AWSCloud/AWSCloud',
							}
						]
					},
					{
						name: '招商合作',
						path: '/pages/investmentCooperation/investmentCooperation',
						icon: '/static/image/tabBar/icon_home.png',
						children:[]
					},
					{
						name: '帮助中心',
						path: '/pages/helpCenter/helpCenter',
						icon: '/static/image/tabBar/icon_home.png',
						children:[]
					},
					
				]
			}
		},
		computed: {
			...mapState({
				appMeunShow:state=>state.app.appMeunShow,
				mode:state=>state.app.mode
			})
		},
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					this.activePath = newRoute.path
				}
			}
		},
		methods: {
			...mapActions(['setAppMeunShowFn']),
			navigator(row){
				uni.navigateTo({
					url:row.path
				})
				this.setAppMeunShowFn(!this.appMeunShow)
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon{
		width: 40rpx;height: 40rpx;
	}
	.activeText{
		color: #597EF7;
	}
</style>